<template>
  <div class="content">
    <div class="title">问题类型占比</div>
    <div
      id="mychart"
      ref="chart"
      style="width:460px;height:265px"
    />
  </div>

</template>

<script>
import chartClass from 'chart-all'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { problemDistribution } from '@/api/inspection/index.js'
const erd = elementResizeDetectorMaker()
export default defineComponent({
  name: 'Propertion',
  setup(props, { emit }) {
    const data = reactive({
      myChart: null,
      chart: null
    })
    // 获取初始信息数据
    const getInfo = () => {
      problemDistribution().then(({ data }) => {
        const _data = data
        // console.log(_data, '111')
        // const _data = [{ type: 1, num: 1 }, { type: 3, num: 1 }, { type: 4, num: 1 }, { type: 5, num: 0 }, { type: 6, num: 60 }, { type: 0, num: 0 }]
        let totalVal = 0
        _data.map((item) => {
          totalVal = totalVal + item.num
        })
        var chartData = []
        _data.map((item) => {
          const obj = {}
          switch (item.type) {
            case 0:
              obj.name = '纵向裂缝'
              break
            case 1:
              obj.name = '横向裂缝'
              break
            case 3:
              obj.name = '网状裂纹'
              break
            case 4:
              obj.name = '坑槽'
              break
            case 5:
              obj.name = '块状裂纹'
              break
            case 6:
              obj.name = '积水'
              break
          }
          obj.count = item.num
          obj.value = (item.num / totalVal * 100).toFixed(2)
          if (obj.count !== 0) {
            chartData.push(obj)
          }
        })

        initChart(chartData)
      })
    }
    const initChart = (seriesData) => {
      const legendData = ['纵向裂缝', '横向裂缝', '网状裂纹', '坑槽', '块状裂纹', '积水']

      var colorList = ['#75E0D2', '#18ADF2', '#4E78F1', '#EE752D', '#8080FF', '#B5E241']
      const option = {
        tooltip: {
          trigger: 'item',
          borderColor: 'rgba(255,255,255,.3)',
          backgroundColor: 'rgba(13,5,30,.6)',
          borderWidth: 1,
          padding: 5,
          formatter: function(parms) {
            var str = parms.marker + '' + parms.data.name + '</br>' +
              '数量：' + parms.data.count + '</br>' +
              '占比：' + parms.percent + '%'
            return str
          }
        },
        legend: {
          data: legendData,
          icon: 'roundRect',
          itemWidth: 17,
          itemHeight: 17,
          origin: 'vertical',
          y: 'center',
          left: '77%',
          selectedMode: false
        },

        series: [{
          type: 'pie',
          center: ['40%', '55%'],
          radius: ['30%', '73%'],
          minAngle: 30,
          labelLine: {
            show: false,
            normal: {
              length: 25,
              length2: 60
            }
          },
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },

          label: {

            normal: {
              show: false,
              position: 'inner',
              // formatter: ' {a|{b}}  \n  {c|{c}%}',
              formatter: '{c}%',
              borderWidth: 20,
              fontWeight: 'bold',
              borderRadius: 4,
              // padding: [0, -70],
              rich: {
                a: {
                  color: '#333',
                  fontSize: 16,
                  lineHeight: 30
                },
                b: {
                  fontSize: 16,
                  lineHeight: 30,
                  color: '#CDCDD0'
                },
                c: {
                  fontSize: 12,

                  lineHeight: 30,
                  color: '#63BF6A',
                  align: 'center'
                }
              }
            }
          },

          data: seriesData
        }]
      }
      const myChart = document.getElementById('mychart')
      myChart.removeAttribute('_echarts_instance_')
      data.myChart = echarts.init(myChart)
      data.myChart.setOption(option)
    }
    onMounted(() => {
      getInfo()
    })
    return {
      ...toRefs(data)
    }
  }
})
</script>
<style scoped lang='scss'>
.content {
  position: relative;
  width: 100%;
  height: 100%;
  .title {
    position: absolute;
    top: 15px;
    left: 10px;
    font-size: 14px;
    font-family: Noto Sans SC-Medium, Noto Sans SC;
    font-weight: 500;
    color: #333333;
  }
}
</style>

